<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Circle Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
  $(document).ready(function(){
    $.ajax({
    type: "GET",
    // name of file
    url: "data.xml",
    dataType: "xml",
    success: parseXml
    });

  
  function parseXml(xml){
    var citymap = {};
    var cityCircle;
    var citymap = {};
    var mapOptions = {
      zoom: 2,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    // parse each line of xml file with an structure similar to this one
      $(xml).find('item').each(function(){
        citymap[$(this).find('country').text()] = {
        'center' : new google.maps.LatLng($(this).find('latitude').text(), $(this).find('longitude').text()),
        'population' : $(this).find('population').text(),
        'description' : $(this).find('description').text(),
        }
      });

    for (var city in citymap) {
      //definition of a function
      function makeBubbleHandler(circle, city){
        var iwOptions = {
          content: citymap[city].description,
          position: citymap[city].center
        }
        google.maps.event.addListener(circle, 'click', function(){
        infoBubble.setOptions(iwOptions);
        infoBubble.open(map);
      });
      } 
      // Construct the circle for each value in citymap. We scale population by 20.
      var infoBubble = new google.maps.InfoWindow();
      var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        description: citymap[city].description,        
        radius: citymap[city].population * 1000
      };
      cityCircle = new google.maps.Circle(populationOptions);
      makeBubbleHandler(cityCircle, city); 
    }

  }
});
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>

</html>
